<template>
  <view class="num">
    <view class="content">
      <view class="container">
        <view class="navs">
          <uni-icons type="person-filled" size="30" color="white"></uni-icons>
          <text class="text" style="font-size: 18px; color: white;">设备保养</text>
        </view>
        <view class="tab-bar" style="margin-top: 90rpx;background: #ffffff; width: 100%;">
          <view
            class="tab-item"
            :class="{active: currentTab === '待保养'}"
            @click="changeTab('待保养')"
          >
            A产品
          </view>
          <view
            class="tab-item"
            :class="{active: currentTab === '保养中'}"
            @click="changeTab('保养中')"
          >
            B产品
          </view>
          <view
            class="tab-item"
            :class="{active: currentTab === '已完成'}"
            @click="changeTab('已完成')"
          >
            C产品
          </view>
		  <view
		    class="tab-item"
		    :class="{active: currentTab === 'B产品'}"
		    @click="changeTab('B产品')"
		  >
		    D产品
		  </view><strong></strong>
		 
        </view>
		<view style="background: #ffffff; padding: 30rpx; border-radius: 20rpx;   border: 10rpx solid #ccc;">
					  <view >
					  	<text>机芯1</text><text style="background: red; color: #ffffff; text-align: center; padding-left:20rpx;padding-right:20rpx ; margin-left: 500rpx; border-radius:20rpx;">离线</text>
					  </view>
					  <view>
					所属产品： A型产品
					  </view>
					  
		</view>
		<view style="background: #ffffff; padding: 30rpx; border-radius: 20rpx;   border: 10rpx solid #ccc;">
					  <view >
					  	<text>机芯1</text><text style="background: #6da6ff; color: #ffffff; text-align: center; padding-left:20rpx;padding-right:20rpx ; margin-left: 500rpx; border-radius:20rpx;">离线</text>
					  </view>
					  <view>
					所属产品： A型产品
					  </view>
					  
		</view>
		<view style="background: #ffffff; padding: 30rpx; border-radius: 20rpx;   border: 10rpx solid #ccc;">
					  <view >
					  	<text>机芯1</text><text style="background: #6da6ff; color: #ffffff; text-align: center; padding-left:20rpx;padding-right:20rpx ; margin-left: 500rpx; border-radius:20rpx;">离线</text>
					  </view>
					  <view>
					所属产品： A型产品
					  </view>
					  
		</view>
		<view style="background: #ffffff; padding: 30rpx; border-radius: 20rpx;   border: 10rpx solid #ccc;">
					  <view >
					  	<text>机芯1</text><text style="background: red; color: #ffffff; text-align: center; padding-left:20rpx;padding-right:20rpx ; margin-left: 500rpx; border-radius:20rpx;">离线</text>
					  </view>
					  <view>
					所属产品： A型产品
					  </view>
					  
		</view>
		<view style="background: #ffffff; padding: 30rpx; border-radius: 20rpx;   border: 10rpx solid #ccc;">
					  <view >
					  	<text>机芯1</text><text style="background: #6da6ff; color: #ffffff; text-align: center; padding-left:20rpx;padding-right:20rpx ; margin-left: 500rpx; border-radius:20rpx;">离线</text>
					  </view>
					  <view>
					所属产品： A型产品
					  </view>
					  
		</view>
		<view style="background: #ffffff; padding: 30rpx; border-radius: 20rpx;   border: 10rpx solid #ccc;">
					  <view >
					  	<text>机芯1</text><text style="background: #6da6ff; color: #ffffff; text-align: center; padding-left:20rpx;padding-right:20rpx ; margin-left: 500rpx; border-radius:20rpx;">离线</text>
					  </view>
					  <view>
					所属产品： A型产品
					  </view>
					  
		</view>
		<view style="background: #ffffff; padding: 30rpx; border-radius: 20rpx;   border: 10rpx solid #ccc;">
					  <view >
					  	<text>机芯1</text><text style="background: red; color: #ffffff; text-align: center; padding-left:20rpx;padding-right:20rpx ; margin-left: 500rpx; border-radius:20rpx;">离线</text>
					  </view>
					  <view>
					所属产品： A型产品
					  </view>
					  
		</view><view style="background: #ffffff; padding: 30rpx; border-radius: 20rpx;   border: 10rpx solid #ccc;">
					  <view >
					  	<text>机芯1</text><text style="background: red; color:#ffffff; text-align: center; padding-left:20rpx;padding-right:20rpx ; margin-left: 500rpx; border-radius:20rpx;">离线</text>
					  </view>
					  <view>
					所属产品： A型产品
					  </view>
					  
		</view>
		<view style="background: #ffffff; padding: 30rpx; border-radius: 20rpx;   border: 10rpx solid #ccc;">
					  <view >
					  	<text>机芯1</text><text style="background: red; color: #ffffff; text-align: center; padding-left:20rpx;padding-right:20rpx ; margin-left: 500rpx; border-radius:20rpx;">离线</text>
					  </view>
					  <view>
					所属产品： A型产品
					  </view>
					  
		</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: '待保养',
      // 模拟待维修数据
      repairPendingList: [
     
      ],
      // 模拟维修中数据
      repairInProgressList: [
      
      ],
      // 模拟已完成数据
      repairCompletedList: [
       
      ],
	  repairCompletedList1: [
	   
	  ],
    };
  },
  methods: {
    changeTab(tab) {
      this.currentTab = tab;
    }
  }
};
</script>

<style>
		
	.box4{
		color: #ffffff;
		border-radius:12rpx ;
		padding-top:90rpx;
	}
.num {
  background: #ccc;
  width: 100%;
  height: 100vh;
}
.box {
  margin: 10px;
  border: none; /* 去掉白色边框，让整体更协调 */
  background-color: #ffffff; 
  border-radius:12rpx ;
}
.container {
  /* padding: 15rpx; */
}
.tab-bar {
  display: flex;
  justify-content: space-around;
  border-bottom: 1rpx solid #ccc;
}
.tab-item {
  padding: 10rpx 15rpx;
  cursor: pointer;
}
.active {
  color: #1aad19;
  border-bottom: 2rpx solid #1aad19;
}
.tab-content {
  margin-top: 15rpx;
}
.navs {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}
.text {
  margin-left: 10rpx;
}
</style>